<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children'}"
    >
      <el-table-column prop="id" label="菜单编号" sortable width="180"></el-table-column>
      <el-table-column prop="title" label="菜单名称"  width="180"></el-table-column>
      <el-table-column prop="icon" label="菜单图标"  width="180"></el-table-column>
      <el-table-column prop="url" label="菜单地址"  width="180"></el-table-column>
      <el-table-column  label="状态"  width="180">
          <template v-slot="scope">
              <el-button v-if="scope.row.status === 1" type="success">启用</el-button>
              <el-button v-else type="danger">禁用</el-button>
          </template>
      </el-table-column>
      <el-table-column  label="操作" sortable width="180">
          <template v-slot="scope">
            <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMenu, delMenu } from '../../../request/api';
import { successAlert } from '../../../utils/alert';
export default {
    data(){
        return{
            tableData: [],//菜单列表
        }
    },
    methods:{
        //获取菜单列表数据
        requestMenu(){
            getMenu({istree:true}).then(res=>{
                if(res.code === 200){
                    // console.log(res.list);
                    this.tableData = res.list
                }
            })
        },
        // 将该编辑事件传递给Menu组件
        edit(id){
            this.$emit('edit',id)
        },
        del(id){
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    // 发起删除请求
                    delMenu({id}).then(res=>{
                        if(res.code === 200){
                            // 消息提示
                            successAlert(res.msg)
                            // 刷新列表数据
                            this.requestMenu()
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
        }
    },
    mounted(){
        // 发起菜单列表
        this.requestMenu()
        this.$eventBus.$on('message',()=>{
            this.requestMenu()
        })
    }
};
</script>

<style>
</style>